@charset "utf-8";
@import "common";
$user-font-color:#7f7f7f;
.wrap-user {
    width: r(640px);
}

ul li {
    list-style: none;
}

.section {
   
    width: r(640px);
    background: #303030;
}
.head-search{
     background: #222222;
       width: r(640px);
        height: r(89px);
}

.section-user {
    font-size: 0;
    background: #222222;
    width: r(640px);
    height: r(360px);
    margin-bottom: r(23px);
    .user-contain {
        position: relative;
        width: r(580px);
        height: r(325px);
        padding-top: r(35px);
        .user-img {
            margin: 0 auto;
            width: r(130px);
            height: r(130px);
            border-radius: 50%;
            overflow: hidden;
            >img {
                width: r(130px);
                height: r(130px);
            }
        }
        .red-num {
            position: absolute;
            width: r(33px);
            height: r(33px);
            background: red;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;
            line-height: r(33px);
            left: r(325px);
            span {
                font-size: r(20.69px);
                color: white;
            }
        }
        .user-detail {
           
            margin: r(15px) auto;
            width: r(194px);
            height: r(95px);
            color: white;
            >span {
                font-size: r(24.86px);
                margin-left: r(7px);
            }
            .concer {
                float: right;
                width: r(92px);
                height: r(20px);
                border: 1px white solid;
                line-height: r(20px);
                text-align: center;
                margin: {
                    top: r(5px);
                }
                >span {
                    font-size: r(14.2px);
                }
            }
            .star-icon {
                width: r(124px);
                height: r(20px);
                margin: {
                    top: r(4px);
                    left: r(40px);
                    bottom: r(9px);
                }
                .icon-star {
                    float: left;
                    font-size: r(24px);
                    list-style: none;
                    color: yellow;
                    margin-left: r(5px);
                }
            }
            .fans-num {
                width: r(194px);
                height: r(25px);
                font-size: r(23.08px);
                ul li {
                  
                    float: left;
                    span {
                        color: red;
                    }
                   
                    div{
                        position: relative;
                        width: r(88px);
                        height: r(25px);
                        padding-right: r(10px);
                        &::after{
                        content: "|";
                        position: absolute;
                        right: 0;
                        
                       
                      
                        }
                    }
                    &:nth-of-type(2){
                        margin-left: r(8px);
                    }
                }
            }
        }
        .user-botton{
            margin: r(5px) auto;
            width: r(460px);
            height: r(51px);
            
            div{
                width: r(218px);
                height: r(51px);
                border-radius: r(25px);
                text-align: center;
                line-height: r(51px);
                >p{
                    color: white;
                    font-size: r(23.08px);
                }
            }
            
            
            .shoucang{
                background: #b60005;
            }
            .fabu{
                background: #cdcdcd;
            }
        }
    }
}

.section-message {
    font-size: 0;
    background: #222222;
    width: r(640px);
    height: r(627px);
    .message-contain{
        font-size: r(23.08px);
        width: r(580px);
        height: r(627px);
        .title{
             width: r(580px);
             height: r(94px);
             border-bottom: r(2px) solid $user-font-color;
             >p{
                 color: $user-font-color;
                 margin-top: r(48px);
             }
        }
        .sg-introduce{
            width: r(430px);
             height: r(87px);
             border-bottom: r(2px) solid $user-font-color;
             text-align: center;
             line-height:r(87px);
             color: white;
             >p{
                 font-size: r(21.31px);
                 
             }
        }
        .new-message{
            width: r(430px);
            height: r(87px);
            text-align: center;
             line-height:r(87px);
             color: white;
              >p{
                 font-size: r(21.31px);
                 
             }
        }
        .wenzhang{
            width: r(580px);
            height: r(60px);
            border-bottom: r(2px) solid $user-font-color;
            >p{
                 color: $user-font-color;
                 
             }
        }
        .ziyuan{
             width: r(580px);
            height: r(90px);
            line-height: r(90px);
            border-bottom: r(2px) solid $user-font-color;
            >p{
                 color: $user-font-color;
                 
             }
        }
        .kecheng{
            line-height: r(90px);
            width: r(580px);
            height: r(90px);
            margin-bottom: r(23px);
            >p{
                 color: $user-font-color;                
             }
        }
        .button-exit{
            width: r(178px);
            height: r(51px);
            text-align: center;
            line-height: r(51px);
            background: #b60005;
            border-radius: r(25px);
            p{
                color: white;
                
            }
        }
    }
}


